import React from 'react';
import styles from './index.less';
import Title from '../Title';
import { G2, Chart, Tooltip, Line, Interval, Coord, Point } from 'bizcharts';

const data = [
  { name: 'a', label: '发电量', value: [0, 120] },
  { name: 'b', label: '上网电量', value: [0, 50] },
  { name: 'c', label: '进场垃圾量', value: [0, 60] },
  { name: 'a', label: '供气量', value: [0, 100] },
  { name: 'b', label: '实际标煤耗', value: [0, 35.5] },
  { name: 'c', label: '吨垃圾上网电量', value: [0, 37.4] },
];

export default function Grouped() {
  return (
    <div className={styles.cont}>
      <Title text={'集团生产明细综评'} icon={require('../../img/icon2.png')} />
      <div className={styles.chart}>
        <span className={styles.state}>
          <img
            src={require('../../img/icon10.png')}
            style={{ height: 50, width: 50 }}
          ></img>
          <span>优秀</span>
        </span>
        <Chart
          style={{ fontSize: 5 }}
          height={220}
          width={300}
          padding="auto"
          data={data}
          autoFit
        >
          <Line
            adjust={[
              {
                type: 'stack',
                marginRatio: 1,
              },
            ]}
            color="name"
            position="label*value"
          />
          <Point color="name" shape="circle" position="label*value" />
          <Coord type="polar" />
          <Tooltip shared />
        </Chart>
      </div>
    </div>
  );
}
